<template>
  <div class="study">
    <div v-if="isUser" :key="0">
      <label for="name">用户</label>
      <input type="text" id="name" />
    </div>
    <div v-else :key="1">
      <label for="password">密码</label>
      <input type="text" id="password" />
    </div>
    <button @click="isUser = !isUser">切换</button>
  </div>
</template>

<script>
export default {
  name: "study_1",
  data() {
    return {
      isUser: true
    };
  },
  mounted() {
    //filter过滤
    const num = [10, 20, 110, 203, 99];
    let newnum = num.filter(n => {
      return n < 100; //返回为ture的被添加进新的数组
    });
    //map函数批量处理
    let new2num = newnum.map(n => {
      return n * 2;
    });
    console.log(new2num);
    //reduce汇总所有值，0为初始值，之后返回每一次遍历的值，
    let total = new2num.reduce((preValue, n) => {
      return preValue + n;
    }, 0);
    console.log(total);
    //ES6箭头函数+链式编程
    let new3num = num
      .filter(n => n < 100)
      .map(n => n * 2)
      .reduce((preValue, n) => preValue + n);
    console.log(new3num);
  },
  methods: {}
};
</script>

<style lang="less" scoped></style>
